<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #roadRescueInfoForm .layui-form-select {
            /*display: inherit;*/
            width: 15%;
            float: left;
            /*margin-right: 5%;*/
        }

        #roadRescueInfoForm .layui-form-select input {
            border-right: 0;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #009688;
        }

        .roadRescueInfoP {
            line-height: 38px;
        }
        .InfoTr td{
            width: 100px;
        }
    </style>
</head>
<body>
<div class="layui-tab-content">
    <div class="layui-tab-item layui-show" id="roadRescueDiv">

        <div class="layui-tab" id="roadRescueTab" lay-filter="roadRescueTab">
            <ul class="layui-tab-title">
                <li class="layui-this">全部</li>
                <li>等待处理</li>
                <li>正在处理</li>
                <li>处理完成</li>
            </ul>
        </div>


        <div class="layui-form-item layui-form-text">
            <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                <input type="text" id="roadRescueSearchName" placeholder="请输入姓名,电话或车牌" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" id="roadRescueSearch">搜索</button>
            </div>
            <div class="layui-input-inline" style=" float: right;margin-right: 10%;">
                <button type="submit" class="layui-btn layui-btn-normal" id="roadRescueAdd">添加</button>
            </div>
        </div>
        <table class="layui-hide" lay-filter="roadRescueTable" id="roadRescueTable"></table>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/html" id="roadRescueInfo">
    <form class="layui-form" style="white-space:nowrap!important;margin-top: 20px;margin-right: 20px"
          lay-filter="roadRescueInfoForm" id="roadRescueInfoForm">
        <div class="layui-form-item">
            <label class="layui-form-label required">客户名称:</label>
            <div class="layui-input-block">
                <input type="text" name="customerName" autocomplete="off" placeholder="请输入客户名称"
                       class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">客户电话:</label>
            <div class="layui-input-block">
                <input type="text" name="customerPhone" autocomplete="off" placeholder="请输入客户电话"
                       class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required ">车牌:</label>
            <div class="layui-input-block">
                <select id="plateSelect" lay-filter="plateSelect">

                </select>
                <input style="width: 85%;border-left: 0;position: relative;
    left: -1px;" type="text" name="plate" autocomplete="off"
                       placeholder="请输入车牌"
                       class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">故障地点:</label>
            <div class="layui-input-block">
                <input type="text" name="faultLocale" autocomplete="off" placeholder="请输入故障地点"
                       class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">故障描述:</label>
            <div class="layui-input-block">
                        <textarea name="faultDescribe" id="faultDescribe" placeholder="请输入故障描述"
                                  class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item" id="ActivityTicketInfoBtn" style="text-align: center">
            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn">保存
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="closeBtn">取消</button>
        </div>


    </form>
</script>
<script type="text/html" id="updateStatus">
    <form class="layui-form" style="white-space:nowrap!important;margin-top: 20px;margin-right: 20px"
          lay-filter="roadRescueInfoForm" id="updateStatusForm">
        <div class="layui-form-item">
            <label class="layui-form-label">最新状态:</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required" lay-filter="status" id="status">

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态备注:</label>
            <div class="layui-input-block">
                <input type="text" name="statusNotes" autocomplete="off" placeholder="请输入状态备注"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">处理时间:</label>
            <div class="layui-input-block">
                <input type="text" name="handlerDate" id="handlerDate" autocomplete="off"
                       class="layui-input" lay-verify="required" disabled>
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 110px;margin-top: 25px">
            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveStatusBtn"
                    id="saveStatusBtn">保存
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="closeStatusBtn">取消</button>
        </div>
    </form>
</script>
<!--店铺入住详情页面-->
<script type="text/html" id="showRoadRescueInfo">
    <h3 align="left" style="margin-left: 5%;margin-top: 15px;margin-bottom: 15px">救援详情</h3>
    <table align="center" border="1" width="90%">
        <tr class="InfoTr">
            <td align="center" >客户姓名:</td>
            <td align="center" ><p class="roadRescueInfoP" id="rriCustomerName"></p></td>
            <td align="center" >客户电话:</td>
            <td align="center" ><p class="roadRescueInfoP" id="rriCustomerPhone"></p></td>
        </tr>
        <tr>
            <td align="center" >故障描述:</td>
            <td align="center" ><p class="roadRescueInfoP" id="rriFaultDescribe"></p></td>
            <td align="center" >故障地点:</td>
            <td align="center" ><p class="roadRescueInfoP" id="rriFaultLocale"></p></td>
        </tr>
        <tr>
            <td align="center" >车牌:</td>
            <td align="center" ><p class="roadRescueInfoP" id="rriPlate"></p></td>
            <td align="center" >报警时间:</td>
            <td align="center" style="width: 100px"><p class="roadRescueInfoP" id="rriAlarmDate"></p></td>
        </tr>
    </table>
    <h3 align="left" style="margin-left: 5%;margin-top: 15px">救援状态历史</h3>
    <ul class="layui-timeline" style="margin-left: 5%;margin-top: 15px;" id="rrlog">
    </ul>
</script>
<script th:inline="javascript">
    layui.use(['element', 'form', 'table', 'form', 'jquery'], function () {
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.jquery;
        var status;
        var plateSelect = '吉';
        table.render({
            elem: '#roadRescueTable'
            , url: '/roadRescue'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'customerName', title: '客户姓名', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'customerPhone', title: '客户电话', align: 'center'}
                , {field: 'faultDescribe', width: '20%', title: '故障描述', align: 'center'}
                , {field: 'faultLocale', width: '20%', title: '故障地点', align: 'center'}
                , {field: 'plate', title: '车牌', align: 'center'}
                , {
                    field: 'status', title: '状态', align: 'center', templet: function (d) {
                        var str = '';
                        var status = d.status;
                        if (status == 0) {
                            str = "<div>等待处理</div>"
                        } else if (status == 1) {
                            str = "<div>正在处理</div>"
                        } else if (status == 2) {
                            str = "<div>处理完成</div>"
                        }
                        return str;
                    }
                }
                , {field: 'alarmDate', title: '报警时间', align: 'center'}
                , {
                    title: '操作', align: 'center', templet: function (d) {
                        var str = '';
                        var status = d.status;
                        if (status != 2) {
                            str = "<a  data-id='" + d.rrId + "' data-status='" + d.status + "' class='layui-btn layui-btn-sm updateBtn'>操作</a>"
                        } else {
                            str = "<a class='layui-btn layui-btn-sm'  lay-event=\"showBtn\">查看</a>"
                        }
                        return str;
                    }
                }
            ]]
            , page: true
        });


        $('#roadRescueDiv').on('click', '.updateBtn', function (res) {
            var rrId = $(this).attr("data-id");
            var rrStatus = $(this).attr("data-status");
            var index = layer.open({
                type: 1,
                area: ['400px', '300px'],
                title: '设置救援单状态',
                content: $('#updateStatus').html(),
                success: function () {
                    if (rrStatus == 0) {
                        $('#status').append("  <option value=\"1\">正在处理</option>\n" +
                            "                    <option value=\"2\">处理完成</option>")
                    } else if (rrStatus == 1) {
                        $('#status').append("<option value=\"2\">处理完成</option>")
                    }
                    $('#handlerDate').val(dateFormat("YYYY-mm-dd HH:MM:SS", new Date()));
                    form.render('select');

                    form.on('submit(saveStatusBtn)', function (form) {
                        console.log(form)
                        $.ajax({
                            url: '/roadRescue/updateStatus',
                            method: 'Post',
                            data: {
                                rrId: rrId,
                                status: form.field.status,
                                statusNotes: form.field.statusNotes,
                                handlerDate: form.field.handlerDate,
                            },
                            // processData: false,//用于对data参数进行序列化处理 这里必须false
                            // contentType: false, //必须
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('roadRescueTable', {where: {status: status}})
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })


                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                    $('#closeStatusBtn').click(function () {
                        layer.close(index);
                    })
                }
            })
        })

        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                }
                ;
            }
            ;
            return fmt;
        }

        var plates = ['京', '沪', '津', '渝', '冀', '晋', '蒙', '黑', '苏', '浙',
            '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼',
            '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新', '辽', '吉']

        function loadSelect() {
            for (let i = 0; i < plates.length; i++) {
                $('#plateSelect').append("<option value='" + plates[i] + "' selected>" + plates[i] + "</option>")
            }
        }

        table.on('tool(roadRescueTable)', function (obj) {
            console.log(obj.data)
            if (obj.event === 'showBtn') {
                showRoadRescueInfo(obj.data)
            }
        })

        function showRoadRescueInfo(data) {
            shopInfoWindows = layer.open({
                type: 1,
                area: ['700px', '500px'],
                maxmin: true,
                title: '道路救援详情',
                content: $('#showRoadRescueInfo').html(),
                success: function () {
                    $('#rriCustomerName').text(data.customerName)
                    $('#rriAlarmDate').text(data.alarmDate)
                    $('#rriCustomerPhone').text(data.customerPhone)
                    $('#rriFaultDescribe').text(data.faultDescribe)
                    $('#rriFaultLocale').text(data.faultLocale)
                    $('#rriPlate').text(data.plate)
                    //处理完成
                    if (data.props && data.props.processed) {
                        var str = "  <li class=\"layui-timeline-item\">" +
                            "            <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i> " +
                            "            <div class=\"layui-timeline-content layui-text\"> " +
                            "                <h3 class=\"layui-timeline-title\">"+data.props.processed.handlerDate+"</h3> " +
                            "<p>状态：处理完成</p>"+
                            "<p>备注："+data.props.processed.statusNotes+"</p>"+
                            "            </div> " +
                            "        </li>"
                        $("#rrlog").append(str)
                    }
                    //处理中
                    if (data.props && data.props.processing) {
                        var str = "  <li class=\"layui-timeline-item\">" +
                            "            <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i> " +
                            "            <div class=\"layui-timeline-content layui-text\"> " +
                            "                <h3 class=\"layui-timeline-title\">"+data.props.processing.handlerDate+"</h3> " +
                            "<p>状态：处理中</p>"+
                            "<p>备注："+data.props.processing.statusNotes+"</p>"+
                            "            </div> " +
                            "        </li>"
                        $("#rrlog").append(str)
                    }
                    var str1 = "  <li class=\"layui-timeline-item\">" +
                        "            <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i> " +
                        "            <div class=\"layui-timeline-content layui-text\"> " +
                        "                <h3 class=\"layui-timeline-title\">"+data.alarmDate+"</h3> " +
                        "<p>状态：等待处理</p>"+
                        "<p>备注："+data.faultDescribe+"</p>"+
                        "            </div> " +
                        "        </li>"
                    $("#rrlog").append(str1)
                    // form.val('showRoadRescueInfoForm',data);
                }
            })
        }


        //添加按钮
        $('#roadRescueAdd').click(function () {
            var index = layer.open({
                type: 1,
                area: ['500px', '450px'],
                maxmin: true,
                title: '新增道路救援',
                content: $('#roadRescueInfo').html(),
                success: function () {
                    loadSelect();
                    form.render('select');
                    form.on('submit(saveBtn)', function (form) {
                        if (!/^[0-9]*$/.test(form.field.customerPhone)) {
                            layer.msg('电话格式错误', {icon: 2});
                            return false;
                        }
                        console.log(form.field.plate)
                        if (!/^[A-Za-z0-9]*$/.test(form.field.plate)) {
                            layer.msg('车牌只能是数字或字母', {icon: 2});
                            return false;
                        }
                        if (!form.field.faultDescribe) {
                            layer.msg('请填写故障描述', {icon: 2});
                            return false;
                        }
                        form.field.plate = plateSelect + form.field.plate;
                        // console.log(form);
                        $.ajax({
                            url: '/roadRescue',
                            method: 'Post',
                            data: form.field,
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('roadRescueTable', {where: {status: status}})
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                    $('#closeBtn').click(function () {
                        layer.close(index);
                    })
                }
            })
        })
        form.on('select(plateSelect)', function (data) {
            plateSelect = data.value;
        })
        //搜索
        $('#roadRescueSearch').click(function () {
            var name = $('#roadRescueSearchName').val();
            table.reload('roadRescueTable', {where: {search: name, status: status}})
        })


        element.on('tab(roadRescueTab)', function (data) {
            console.log(data)
            if (data.index == 0) {
                status = null;
            } else if (data.index == 1) {
                status = 0;
            } else if (data.index == 2) {
                status = 1;
            } else if (data.index == 3) {
                status = 2;
            }
            table.reload('roadRescueTable', {where: {status: status}})
        });


    })
</script>
</body>
</html>
